<template>
  <div class="distribut">
    <div class="distribut__head">
      <el-button type="primary" @click="lineDialog = true">添加线路</el-button>
      <el-button :disabled="deletLinesStatus" @click="deletLines(undefined)"
        >批量删除</el-button
      >
      <el-input
        placeholder="请输入内容"
        v-model="searchData.text"
        @change="reasetTabelData(searchData.text)"
        class="distribut__head--search"
      >
        <el-select
          v-model="searchData.type"
          slot="prepend"
          style="width: 87px;"
          placeholder="请选择"
          @change="reasetTabelData(searchData.text)"
        >
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="司机姓名" :value="1"></el-option>
          <el-option label="手机号" :value="2"></el-option>
          <el-option label="线路" :value="3"></el-option>
          <el-option label="提货点名称" :value="4"></el-option>
        </el-select>
        <el-button
          slot="append"
          @click="reasetTabelData(searchData.text, 1)"
          icon="el-icon-search"
        ></el-button>
      </el-input>
    </div>

    <LineTabel
      ref="lineTabel"
      :tabelList="lineList"
      :deletLinesStatus.sync="deletLinesStatus"
      @getShipperLineList="getShipperLineList"
      @editLine="editLine"
      @deletLines="deletLines"
    >
    </LineTabel>
    <PageManage
      :pageSize="pageSize"
      :pageNum="pageIndex"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></PageManage>

    <LineDialog
      ref="lineDialog"
      :lineDialog.sync="lineDialog"
      @saveLineData="saveLineData"
    >
    </LineDialog>
  </div>
</template>

<script lang="ts">
import PageManage from "@/components/PageManage.vue";
import { Vue, Component, PropSync, Ref } from "vue-property-decorator";
import LineTabel from "./LineTabel.vue";
import LineDialog from "./../pickUpPoint/LineDailog.vue";
import {
  getShipperLineList,
  getShipperLineInfo,
  setShipperLineInfo,
  setShippingLineInfo,
} from "@/api/rection/index";

@Component({
  components: { LineTabel, LineDialog, PageManage },
})
export default class DistributionLines extends Vue {
  /** 顶部switch状态 */
  @PropSync("state", { type: Boolean, default: false })
  syncState: boolean;

  @Ref("lineDialog")
  refLineDialog: any;

  @Ref("lineTabel")
  refLineTabel: any;

  /** 新增线路弹框 */
  lineDialog = false;

  /** 线路列表 */
  lineList = [];

  /** 分页参数 */
  pageSize = 20;

  pageIndex = 1;

  total = 0;

  /** 批量生产删除按钮状态 */
  deletLinesStatus = true;

  /** 搜索条件对象 */
  searchData = {
    /** text 对应的类型 -1=全部 1=司机姓名,2=司机电话,3=线路名称,4=提货点名称 */
    type: -1,
    /** 搜索的文本值 */
    text: "",
    /** 租户id */
    tenantId: "",
    /** 城市合伙人id */
    userId: "",
    /** 分页条数 */
    pageIndex: 1,
    /** 分页页码 */
    pageSize: 20,
  };

  rections = {
    state: true,
    /** 设置时间,初次获取为[] */
    setTime: [],
    /** 预计提货时间,初次为"" */
    setGetGoodTime: "",
    /** 是否送货上门: 0=禁用,1=启用 */
    shippingType: false,
    /** 配送价格:最高上限 */
    shippingPrice: "5",
    /** 送货上门区域百分比 */
    goodPointIdsPercentage: "",
    id: "",
    /** 设置新增提货点是否自动设置送货上门 */
    autoShippingState: true,
    goodPointIds: [],
  };

  /** 设置发货单时间弹框 */
  dialogTimes = false;

  mounted() {
    this.getShipperLineList();
  }

  /**
   * 编辑线路
   */
  editLine(lineId) {
    const param = {
      tenantId: "",
      userId: "",
      lineId,
    };
    getShipperLineInfo(param)
      .then(res => {
        if (res.code === 200) {
          this.refLineDialog.editLine(res.data);
          this.lineDialog = true;
        }
      })
      .catch(err => {
        this.$message.error(err.msg || "网络异常，请稍后重试");
      });
  }

  /**
   * 保存线路成功
   */
  saveLineData(data) {
    setShippingLineInfo(data)
      .then(res => {
        if (res.code === 200) {
          this.lineDialog = false;
          this.getShipperLineList();
          this.$message.success("保存线路成功");
        }
      })
      .catch(err => {
        this.$message.error(err || "网络异常，请稍后重试");
      });
  }

  /**
   * 删除线路
   */
  deletLines(data) {
    if (!data) {
      data = this.refLineTabel.deleteIds;
    }
    if (!data.length) {
      this.$message.error("请选择需要删除项");
      return false;
    }
    this.$confirm("删除后选中的线路信息无法恢复，确认删除选中线路？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        setShipperLineInfo({ ids: data })
          .then(res => {
            if (res.code === 200) {
              this.$message.success("操作成功");
              this.getShipperLineList();
            }
          })
          .catch(err => {
            this.$message.error(err.msg || "网络异常，请稍后重试");
          });
      })
      .catch(() => {
        console.log("取消了删除操作");
      });
  }

  /**
   * 重新获取表格数据
   */
  reasetTabelData() {
    this.pageIndex = 1;
    this.getShipperLineList();
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.pageSize = val;
    this.reasetTabelData();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.pageIndex = val;
    this.getShipperLineList();
  }

  /**
   * 获取线路列表
   */
  getShipperLineList() {
    this.searchData.pageIndex = this.pageIndex;
    this.searchData.pageSize = this.pageSize;
    getShipperLineList(this.searchData)
      .then(res => {
        if (res.code === 200) {
          if (res.data.length) {
            this.total = Number((res as any).totalCount);
            this.lineList = res.data;
          } else if (!res.data.length && this.pageIndex > 1) {
            this.pageIndex--;
            this.getShipperLineList();
          } else {
            this.lineList = [];
          }
        }
      })
      .catch(err => {
        this.$message.error(err.msg || "网络异常，请稍后重试");
      });
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/logistics/distributionLines.scss";
</style>
